import React, { useImperativeHandle, useRef } from 'react'

// React.forwardRef可以允许在函数组件上写ref属性.并将写在函数组件上的ref属性的值(这个值必须是ref对象)传递到这个函数组件内
export default React.forwardRef(function Test(props, appRef) {
  const ref = useRef()
  //   console.log(props, ref)
  // 这个ref就是app组件中的appRef
  // useImperativeHandle的作用: 给ref对象的current属性赋值
  //   useImperativeHandle(appRef, () => {
  //     // 这个回调中的返回值是什么,则appRef的current的值就是什么
  //     return {
  //       f() {
  //         // 让app组件中的按钮调用这个函数,最终导致input获得焦点
  //         ref.current.focus()
  //       },
  //     }
  //   })
  appRef.current = {
    f() {
      ref.current.focus()
    },
  }
  return (
    <div>
      Test
      <input type="text" ref={ref} />
    </div>
  )
})
